<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新型冠状病毒肺炎全球疫情实时追踪</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>

<body>

<div class="container">
    <div class="brief">
        <div class="brief_header">
            <h2>新型冠状病毒肺炎全球疫情实时追踪</h2><br><br>
            <h3>数据来源：约翰·霍普金斯大学系统科学与工程中心</h3><br>
            <h4>统计截至:<span th:text="${#dates.format(data.now,'yyyy-MM-dd')}"></span></h4>
        </div>
    </div>
    <ul class="brief_body">
        <li class="nowConfirm">
            <div class="change"><span>较上日</span><b th:text="'+' +${data.nowConfirm.diffFromPrevDay}"></b></div>
            <div class="number" th:text="${data.nowConfirm.totalCases}"></div>
            <div class="item">现有确诊</div>
        </li>
        <li class="allConfirm">
            <div class="change"><span>较上日</span><b th:text="'+' +${data.confirmed.diffFromPrevDay}"></b></div>
            <div class="number" th:text="${data.confirmed.totalCases}"></div>
            <div class="item">累计确诊</div>
        </li>
        <li class="cureNum">
            <div class="change"><span>较上日</span><b th:text="'+' +${data.recovered.diffFromPrevDay}"></b></div>
            <div class="number" th:text="${data.recovered.totalCases}"></div>
            <div class="item">治愈人数</div>
        </li>
        <li class="deadNum">
            <div class="change"><span>较上日</span><b th:text="'+' +${data.deaths.diffFromPrevDay}"></b></div>
            <div class="number" th:text="${data.deaths.totalCases}"></div>
            <div class="item">死亡人数</div>
        </li>
    </ul>
    <!--    搜索框-->
    <!--    所有疫情国家-->
    <div id="confirmDataTable">
        <h2>全球疫情</h2>
        <table>
            <tr>
                <th style="width: 30%">州/省</th>
                <th style="width: 30%">国家/地区</th>
                <th style="width: 20%">累计确诊</th>
                <th style="width: 20%">新增确诊</th>
            </tr>
            <tr th:each="regionStat : ${data.regionStats}">
                <td th:text="${regionStat.provinceOrState}"></td>
                <td th:text="${regionStat.countryOrRegion}"></td>
                <td th:text="${regionStat.latestTotalCases}" style="color: #d73a30"></td>
                <td th:text="${regionStat.diffFromPrevDay}" style="color: #ee5b00"></td>
            </tr>
        </table>
    </div>
</div>


</body>
</html>
<script th:src="@{/js/flexible.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/echarts.js}"></script>
<script th:src="@{/js/world.js}"></script>
<!--<script th:src="@{/js/nameMap.js}"></script>-->
<!--<script th:src="@{/js/index.js}"></script>-->